<template>
  <div>
    <el-dialog
      title="菜单信息"
      :visible.sync="dialogVisible"
      width="600px"
      destroy-on-close
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="pid">
              <el-input v-model="form.pid" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型" prop="type">
              <!-- <el-input v-model="form.type" maxlength="30" /> -->
              <el-radio v-model="form.type" label="0">目录</el-radio>
              <el-radio v-model="form.type" label="1">菜单</el-radio>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="是否隐藏" prop="hidden">
              <el-switch v-model="form.hidden"> </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="menuSort">
              <el-input v-model="form.menuSort" maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称" prop="title">
              <el-input v-model="form.title" maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="code标识" prop="name">
              <el-input v-model="form.name" maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="path" prop="path">
              <el-input v-model="form.path" maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="component" prop="component">
              <el-input
                :disabled="form.type == '0'"
                v-model="form.component"
                maxlength="100"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { menuService, roleService } from "@/api/sysService";

export default {
  dicts: [],
  components: {},

  data() {
    return {
      resolve: null,
      dialogVisible: false,

      deptOptions: [],
      postOptions: [],
      roleOptions: [],

      // 表单参数
      form: {
        oid: "",
        pid: "",
        title: "",
        menuSort: "",
        hidden: false,
        name: "",
        path: "",
        component: "",
        icon: "",
        type: "",
      },

      // 表单校验
      rules: {
        type: [{ required: true, message: "不能为空", trigger: "blur" }],
        title: [{ required: true, message: "不能为空", trigger: "blur" }],
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        path: [{ required: true, message: "不能为空", trigger: "blur" }],
        component: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },

  created() {
    roleService.list({}).then((res) => {
      this.roleOptions = res.data.data;
    });
  },
  methods: {
    open(row) {
      // const data1 = { username: "John", phone: "123456789" };
      // const { username, phone, role = { id: "1" } } = data1;
      // console.log("test", { username, phone, role });

      console.log("userdialog");
      this.dialogVisible = true;
      if (row) {
        const {
          oid = "",
          pid = "",
          title = "",
          menuSort = "",
          name = "",
          path = "",
          component = "",
          icon = "",
          type = "0",
          hidden = false,
        } = row;

        ///

        this.form = {
          oid,
          pid,
          title,
          menuSort,
          name,
          path,
          component,
          icon,
          type,
          hidden,
        };
      }
      return new Promise((resolve) => {
        this.resolve = resolve;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          menuService.postSave(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.dialogVisible = false;
            this.resolve();
            // this.getList();
          });
        }
      });
    },

    // 取消按钮
    cancel() {
      this.dialogVisible = false;
      this.reset();
    },
  },
};
</script>

<style lang="scss" scoped></style>
